<template>
  <div class="global-container">
    <Asteps :stepActive="stepActive" />
    <div class="steps-content">
      <Steps1 v-if="stepActive === 0" @nextDisabled="nextDisabled = $event" />
      <Steps2
        v-if="stepActive === 1"
        ref="Steps2"
        :certType="certType"
        @initReady="hasEditQualifications"
      />
      <Steps3
        v-if="stepActive === 2"
        ref="Steps3"
        :id="infoId"
        :certType="certType"
        :bussType="bussType"
      />
      <Steps4
        v-if="stepActive === 3"
        ref="Steps4"
        :id="infoId"
        :bussType="bussType"
      />
      <Steps5 v-if="stepActive === 4" :id="infoId" :bussType="bussType" />
      <Steps6 v-if="stepActive === 5" :bussType="bussType" />
    </div>
    <div class="footer">
      <template v-if="stepActive != 5">
        <el-button
          type="primary"
          class="btn"
          v-if="stepActive == 2"
          @click="save"
          >暂存</el-button
        >
        <el-button
          v-if="stepActive != 0 && stepActive != 1"
          type="primary"
          class="btn"
          @click="previous"
          >上一步
        </el-button>
        <el-button
          v-if="stepActive == 1 && bussType == 1"
          type="primary"
          class="btn"
          :disabled="nextDisabled"
          @click="editUserInfo"
          >修改个人信息
        </el-button>
        <el-button
          v-if="stepActive == 1 && bussType == 1"
          type="primary"
          class="btn"
          :disabled="nextDisabled"
          @click="editUserQualification"
          >修改资质信息
        </el-button>
        <el-button
          v-if="
            stepActive == 0 ||
            stepActive == 1 ||
            (stepActive == 2 && infoId) ||
            stepActive == 3
          "
          type="primary"
          class="btn"
          :disabled="nextDisabled"
          @click="next"
          >下一步
        </el-button>
        <el-button
          type="primary"
          class="btn"
          v-if="stepActive == 4"
          @click="submit"
          >确认提交</el-button
        >
      </template>
    </div>
  </div>
</template>
<script>
import Asteps from '@/components/Steps/Asteps.vue';
import Steps1 from './components/Steps1.vue';
import Steps2 from './components/Steps2.vue';
import Steps3 from './components/Steps3.vue';
import Steps4 from './components/Steps4.vue';
import Steps5 from './components/Steps5.vue';
import Steps6 from './components/Steps6.vue';
import businessApi from '@/api/business';
export default {
  props: {
    // 申请id
    id: {
      type: String,
    },
    // 业务类型
    bussType: {
      default: '1',
    },
    // 证书类型
    certType: {
      default: '1',
    },
  },
  components: { Asteps, Steps1, Steps2, Steps3, Steps4, Steps5, Steps6 },
  data() {
    return {
      stepActive: 0,
      infoId: null,
      nextDisabled: false,
    };
  },
  watch: {
    id: {
      handler(val) {
        this.infoId = val;
      },
      immediate: true,
    },
    stepActive: {
      handler(val) {
        if (val === 1 && !this.infoId) {
          this.hasEditUser();
        }
      },
    },
  },
  mounted() {
    this.init();
  },
  beforeRouteLeave(to, from, next) {
    next((vm) => {
      if (to.path !== '/login') {
        vm.$store.commit('count/getCount');
      }
    });
  },
  methods: {
    async init() {
      // 有申请id，跳转到申请页
      if (this.infoId) {
        this.stepActive = 2;
        this.nextDisabled = false;
      }
    },
    // 暂存
    save() {
      this.$refs.Steps3.save().then((res) => {
        if (res.infoId) {
          this.infoId = res.infoId;
        }
      });
    },
    // 上一步
    previous() {
      this.stepActive = this.stepActive - 1;
    },
    // 下一步
    next(e) {
      // 强制失焦
      if (e) {
        let target = e.target;
        if (target.nodeName === 'SPAN' || target.nodeName === 'I') {
          target = target.parentNode;
        }
        target.blur();
      }
      if (this.stepActive == 2) {
        // 保存
        this.$refs.Steps3.save().then((res) => {
          if (res.infoId) {
            this.infoId = res.infoId;
            this.stepActive = this.stepActive + 1;
          }
        });
        return;
      }
      if (this.stepActive == 3 && this.$refs.Steps4.validTable()) {
        return false;
      }
      this.stepActive = this.stepActive + 1;

      console.log(this.stepActive)
    },
    // 提交
    async submit() {
      try {
        // 确认
        await this.$confirm('你确认要提交申请?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        });
        let params = {
          applyId: this.infoId,
        };
        // 根据业务类型调用不同的接口
        await businessApi[`saveUserBusiness${this.bussType}`](1, params);
        this.$message.success('提交成功!');
        this.next();
      } catch (error) {
        console.log(error);
      }
    },
    // 是否可修改个人信息
    hasEditUser() {
      // 未查询到个人信息
      if (this.$store.state.user.userInfo.isCompleteInfo != 1) {
        this.$alert('未查询到您的个人信息，请您前往完善个人信息', '提示', {
          confirmButtonText: '确定',
          showClose: false,
          type: 'warning',
          center: true,
          callback: () => {
            this.$router.push('/userInfo');
          },
        });
        return false;
      }
    },
    // 跳转到个人信息
    editUserInfo() {
      this.$router.push('/userInfo');
    },
    // 跳转到资质信息
    editUserQualification() {
      this.$router.push('/userInfoQlf');
    },
    // 是否可修改资质信息
    hasEditQualifications(data) {
      // 未查询到资质信息、没有申请id
      if (!data.paperCertCode && !this.infoId) {
        this.$alert(
          '未查询到您的二级造价工程师（水利工程）资格证书信息，请您前往完善资格信息',
          '提示',
          {
            confirmButtonText: '确定',
            showClose: false,
            type: 'warning',
            center: true,
            callback: () => {
              this.$router.push('/userInfoQlf');
            },
          },
        );
        return false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.global-container {
  display: flex;
  flex-direction: column;

  .steps-content {
    flex: 1;
  }

  .footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;

    .btn {
      margin-left: 24px;
      width: 120px;
    }
  }
}
</style>
